<template>
  <page-container title="订单评论">
	<view class="queue-free">
		<view class="filter-header">
			  <picker
					:value="billTypeIndex"
					:range="billTypes"
					@change="onBillTypeChange"
				  >
				  <view class="all-bills">
					
					<text>{{ currentBillType }}</text>
					<view class="triangle"></view>
				  </view>
				  </picker>
		</view>
		
		 <!-- 订单列表 -->
		 <scroll-view scroll-y class="order-list">
		   <!-- 排队中订单 -->
		   <view class="order-item" v-for="(el, i) in orders" :key="i" v-if="billTypeIndex == el.status || billTypeIndex == 0">
		     <view class="order-info">
		       <view class="order-row">
		         <view class="order-row-item">
						<text class="label">订单号：</text>
						<text class="value">{{el.orderNo}}</text>
					</view>
					<view class="order-row-item">
						<text class="label">消费时间：</text>
						<text class="value">{{el.orderTime}}</text>
					</view>
					<view class="order-row-item"></view>
		       </view>
				  <view class="status queuing" v-if="el.status == 1">排队中</view>
				  <view class="status ends" v-if="el.status == 2">已完成</view>
				  <view class="status ling" v-if="el.status == 3">免单中</view>
				 
		      <view class="merchant-row">
					  
		         <view class="order-row-item">
						<text class="label">消费商家：</text>
						<text class="value">{{el.merchant}}</text>
					</view>
		         <view class="price-info">
		           <text class="price">实付¥ <text>{{el.amount}}</text> </text>
		           <text class="points">+{{el.points}}积分</text>
		         </view>
		       </view>
		     </view>
		     <view class="queue-info tip1" v-if="el.status == 1">
		       <text>前面有 <text class="number">{{el.queueCount}}</text> 人正在排队</text>
		     </view>
				<view class="queue-info tip2" v-if="el.status == 2">
				  <text>排队免单返回现金<text class="number">120</text>元+<text class="number">120</text>积分，扣除返现手续费XX元</text>
				</view>
				<view class="queue-info tip3" v-if="el.status == 3">
				  
				  <text>已完成<text class="number">20</text>元，剩余<text class="number">100</text>元，请耐心等待</text>
				</view>
		   </view>
		
		   
		 </scroll-view>
		
		 <!-- 底部规则说明 -->
		 <view class="rules">
		   <view class="rules-title">排队面单规则</view>
		   <view class="rules-content">
		     免单规则免单规则免单规则免单规则免单规则免单规则免单规则免单规则免单规则免单规则免单规则免单规则免单规则免单规则免单规则免单规则免单规则免单规则免单规则免单规则...
		   </view>
		 </view>
	</view>
  </page-container>
</template>

<script lang="ts" src="./index.ts">

</script>


<style lang="scss" scoped>
	.queue-free {
		min-height: 100vh;
		background-color: #efefef;
		position: relative;
		z-index: 11;
		.filter-header {
			display: flex;
			justify-content: space-between;
			padding: 24rpx 26rpx;
			font-size: 13px;
			color: #666;
			background-color: #efefef;

			.all-bills,
			.statistics {
				display: flex;
				align-items: center;
				gap: 4px;
			}

			.all-bills {
				// display: flex;
				width: 160rpx;
				height: 44rpx;
				background: #e3e3e3;
				border-radius: 20rpx;
				text-align: center;
				align-items: center;
				justify-items: center;
				padding-left: 20rpx;
				position: relative;

				.triangle {
					position: absolute;
					top: 20rpx;
					right: 18rpx;
					width: 0;
					height: 0;
					border-left: 8rpx solid transparent;
					/* 左边透明 */
					border-right: 8rpx solid transparent;
					/* 右边透明 */
					border-top: 10rpx solid #707070;
					/* 下边颜色填充为黑色 */
				}

				text {
					// margin: 0 auto;
					font-size: 12px;
					font-family: Microsoft JhengHei UI, Microsoft JhengHei UI-Bold;
					font-weight: 700;
					// text-align: left;
					color: #1a1a1a;
				}
			}
		}

		.order-list {
			padding: 0 20rpx;

			.order-item {
				background: #ffffff;
				margin-bottom: 20rpx;
				border-radius: 12rpx;
				box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.16);
				position: relative;

				.order-info {

					padding: 20rpx;
				}

				.order-row {
					display: flex;
					align-items: center;
					margin-bottom: 8px;

					.order-row-item {
						flex: 2;
						font-size: 24rpx;
						font-weight: 500;
						color: #000000;

						.value,
						.label {
							display: block;
						}

						&:last-child {
							flex: 1;
						}
					}
				}

				.merchant-row {
					display: flex;
					align-items: center;

					.order-row-item {
						flex: 5;
						font-size: 24rpx;
						font-weight: 500;
						color: #000000;

						.value,
						.label {
							display: block;
						}
					}

					.price-info {
						flex: 3;
						margin-top: 30rpx;

						.price {
							font-weight: 500;
							color: #f94a15;
							font-size: 16rpx;

							text {
								font-weight: 500;
								font-size: 28rpx;
							}
						}

						.points {
							display: inline-block;

							border: 1px solid #43d534;
							font-size: 24rpx;
							font-weight: 500;
							color: #43d534;
							border-radius: 6rpx;
							padding: 0rpx 6rpx;
						}
					}
				}

				.status {
					// padding: 4px 8px;
					width: 128rpx;
					text-align: center;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 4px;
					font-size: 28rpx;
					position: absolute;
					top: 0;
					right: 0;

					&.queuing {
						background: rgba(67, 213, 52, .3);
						border-radius: 0px 6px 0px 6px;
						color: #43d534;

					}

					&.ends {
						background: rgba(67, 213, 52, 1);
						border-radius: 0px 6px 0px 6px;
						color: #fff;

					}

					&.ling {
						background: rgba(202, 213, 52, .3);
						border-radius: 0px 6px 0px 6px;
						color: #CAD534;

					}
				}

				.price-info {
					margin-left: auto;
					text-align: right;

					.price {
						color: #ff6b6b;
						font-size: 16px;
						font-weight: 500;
					}

					.points {
						color: #4caf50;
						font-size: 12px;
						margin-left: 4px;
					}
				}

				.queue-info {

					padding: 18rpx;
					border-radius: 12rpx;
					font-size: 24rpx;
					text-align: left;

					&.tip1 {
						background: rgba(67, 213, 52, .2);
						color: #000000;

						.number {
							color: #43D534;
							font-size: 32rpx;
						}
					}

					&.tip2 {
						background: #43D534;
						color: #fff;

						.number {
							font-weight: bold;
						}
					}

					&.tip3 {
						background: #CAD534;
						color: #000;

						.number {
							font-weight: bold;
						}
					}

				}

				.status-bar {
					background: #4caf50;
					color: #fff;
					padding: 8px;
					border-radius: 4px;
					margin-top: 12px;
					text-align: center;

					&.yellow {
						background: #ffd93d;
					}
				}
			}
		}

		.rules {
			width: 94%;
			margin: 0 auto;
			background: #ffffff;
			border-radius: 6px;
			padding: 30rpx;

			.rules-title {
				text-align: center;
				font-size: 38rpx;
				font-weight: 500;
				margin-bottom: 12px;
				color: #000000;
			}

			.rules-content {
				color: #999;
				font-size: 24rpx;
				line-height: 1.5;
			}
		}
	}
</style>